<template>
	<view>
		<!-- pages/user/assets/index.wxml -->
		<navbar></navbar>
		<view class="container">
			<view v-if="0 < list.length" class="assets-list">
				<view class="assets" v-for="item in list" :key="item.order_id" @tap.stop.prevent="onAssetsTaped(item)">
					<!-- <tag text="冻结" v-show="item.is_frozen" ></tag> -->
					<view v-if="isdetermine" >
						<image v-if="!item.checkedList" class="xzDiv" src="../../../../static/images/user/choice.png" mode="widthFix"></image>
						<image v-if="item.checkedList" class="xzDiv" src="../../../../static/images/user/choice1.png" mode="widthFix"></image>
					</view>
					<view class="goods__img-wrapper">
						<easy-loadimage class="goods__img" mode="aspectFill" :scroll-top="scrollTop"
							:image-src="item.goods_image" borderRadius="16rpx"></easy-loadimage>
							<view v-if="item.is_sale == 1" class="assets__type f-28">寄售中</view>
							<!-- <view v-if="item.sort_no == '生成中' " class="assets__type f-28">生成中</view> -->
					</view>
					<view class="assets-info">
						<view class="assets__name f-28 col-f onelist-hidden--s">{{ item.goods_name }}</view>
						<view class="assets__sort-no m-top10 f-24"
							v-if="item.is_blind_box == 0 || (item.open_blind_box_status == 1 && item.is_blind_box == 1)">
							<view class="global-limit">
								编号:
							</view>
							<view class="global-limit-count">
								{{ item.sort_no }}/{{ item.total_num }}
							</view>
						</view>
					</view>
				</view>
				<bottom-safe-area></bottom-safe-area>
			</view>
		
		
		<!-- <view class="footer-fixed footer-fixed--blind dis-flex flex-y-center">
			<button v-if="!isdetermine" class="btn-open-blind flex-box f-28 col-0" hover-class="hover"
				@tap.stop.prevent="isPopup">批量开启</button>
			<button v-if="isdetermine" class="btn-open-blind flex-box f-28 col-0" hover-class="hover"
				@tap.stop.prevent="openBox">({{this.order_idArr.length}}/50)开启</button>
		</view> -->
		<view class="zz" v-show="boxPopup">
			<view class="popup">
				<view class="title">
					是否开启盲盒？
				</view>
				<view class="btn" style="border-top:1rpx solid #dfdfdf;height: 100rpx;text-align: center;line-height: 100rpx;">
					<view @click="boxPopup = false" style="width: 295rpx;height: 100%;border-right: 1rpx solid #dfdfdf;">取消</view>
					<view @click="onOpenBlindBox" style="width: 300rpx;height: 100%;color: #007aff;">确定</view>
				</view>
			</view>
		</view>
		
		
		<view class="zz" v-show="boxPopupShow">
			<view class="boxList">
				
				<view v-if="0 < boxList.length" class="assets-list boxList-sol">
					<view class="assets" v-for="item in boxList" :key="item.order_id" @tap.stop.prevent="onAssetsTaped(item)">
						<tag text="冻结" v-show="item.is_frozen"></tag>
						<view :class="['goods__img-wrapper', {'multi' : 1 < item.num}]">
							<!-- <easy-loadimage class="goods__img" mode="aspectFill" :scroll-top="scrollTop"
								:image-src="item.goods_image" borderRadius="16rpx"></easy-loadimage> -->
								<image :src="item.goods_image" mode="aspectFill" class="goods__img"></image>
							<view v-if="1 < item.num" class="assets__num f-28">×{{ item.num }}</view>
						</view>
						<view class="assets-info">
							<view class="assets__name f-28 onelist-hidden--s">{{ item.goods_name }}</view>
						</view>
					</view>
					<bottom-safe-area></bottom-safe-area>
				</view>
				
				
				<view class="boxList-btn" style="border-top:1rpx solid #dfdfdf;height: 100rpx;text-align: center;line-height: 100rpx;">
					<view class="boxList-btn-text" @click="boxPopupShow = false">知道了</view>
				</view>
			</view>
		</view>
			
			
			
		</view>

	</view>
</template>

<script>
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
	import bottomSafeArea from '@/components/bottom-safe-area/index';
	import tag from '@/components/tag/index'
	// pages/user/assets/index.js
	
	const app = getApp();
	export default {
		components: {
			easyLoadimage,
			bottomSafeArea,
			tag
		},
		data() {
			return {
				order_idArr:[],
				boxList:[],
				boxPopup:false,
				boxPopupShow:false,
				goods_id: '',
				scrollTop: 0,
				list: [],
				loading: true,
				isdetermine:false,
				page: 1,
				hasMore: false,
				easyLoadimage: {
					scrollTop: 50
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.options = options;
			this.requestData();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// this.page = 1
			// this.list = []
			// this.requestData();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.page = 1;
			this.requestData(() => {
				uni.stopPullDownRefresh();
			});
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.hasMore && !this.loading) {
				this.requestData();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 开盲盒
			onOpenBlindBox: function(e) {
				
				this.boxPopup = false
				let order_ids = this.order_idArr.join(',')
				let _this = this
				app._get('user.order/openBlindBoxs', {
					order_ids
				}, (res) => {
					console.log(res,"批量开启盲盒")
					this.boxList =res.data
					setTimeout(() => {
						_this.page = 1
						_this.order_idArr= []
						_this.isdetermine = false
						_this.boxPopupShow = true
						_this.requestData()
					}, 800);
				});
			},
			//盲盒二次确认
			openBox(){
				if(this.order_idArr.length == 0){
					uni.showToast({
						title:"请选择盲盒",
						icon:"none"
					})
					return
				}
				this.boxPopup = !this.boxPopup
			},
			//开启多选
			isPopup(){
				this.isdetermine = !this.isdetermine
			},
			//////// networking ////////
			requestData: function(complete) {
				this.loading = true;
				app._get(
					'user.order/collectListDetail', Object.assign({}, this.options, {
						page: this.page,
					}), (res) => {
						if (1 == res.code) {
							let {
								page,
								list,
								hasMore
							} = this;
							if (1 == page) {
								list.length = 0;
							}

							let {
								data,
								total
							} = res.data.list;
							data.map(el=>el.checkedList = false)
							list = [...list, ...data];
							hasMore = total > list.length;
							// checkedList
							
							console.log(list,'list')
							if (hasMore) {
								page++;
							}
							// for(let n = 0,n<list.length;n++){
							// 	// list[i].checkedList = false
							// }
							this.page = page;
							this.list = list;
							this.hasMore = hasMore;
						}
					},
					null,
					() => {
						this.loading = false;
						if (complete) {
							complete();
						}
					}
				);
			},
			onAssetsTaped: function(assets) {
				console.log(assets.order_id,'当前数组的id')
				if(this.isdetermine){
					if(this.order_idArr.length > 50){
						console.log('当前数组的长度过长')
						uni.showToast({
							title:"最多同时开启50个"
						})
						return
					}
					let  index = this.order_idArr.indexOf(assets.order_id)
					if( index > -1){
						this.order_idArr.splice(index,1)
					}else{
						this.order_idArr.push(assets.order_id)
					}
					console.log(this.order_idArr,'this.order_idArr.indexOf(assets.order_id)')
					assets.checkedList = !assets.checkedList
					return
				}
				uni.navigateTo({
					url: `../detail/detail?order_id=${assets.order_id}`
				});
			}
		}
	};
</script>
<style>
	page {
		/* background: #E5E5E5 !important; */
		    background: #000001 !important;
	}
</style>
<style lang="scss" scoped>
	.assets-list {
		padding: 20rpx;
		overflow: hidden;
	}

	.assets {
		width: -webkit-calc((100% - 30rpx) * 0.5);
		width: calc((100% - 30rpx) * 0.5);
		border-radius: 10rpx;
		float: left;
		box-sizing: border-box;
		background-color: #161819;
		position: relative;
		overflow: hidden;
	}

	.assets:nth-child(even) {
		margin-left: 30rpx;
	}

	.assets:nth-child(n+3) {
		margin-top: 30rpx;
	}

	.assets .assets-info {
		padding: 20rpx;
	}

	.assets .goods__img-wrapper {
		height: 380rpx;
		position: relative;
	}

	.assets .goods__img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
	}

	.assets .assets__sort-no {
		// background: #d7b059;
		display: flex;
		flex-direction: row;
		color: #ffffff;
	}

	.global-limit {
		display: inline-block;
		height: 34rpx;
		background: $uni-bg-color;
		padding: 0 16rpx;
		border-radius: 1px 0 0 1px;
		font-size: 22rpx;
		text-align: center;
		color: #ffffff;
		line-height: 34rpx;
	}

	.global-limit-count {
		display: inline-block;
		height: 34rpx;
		background: rgba(0, 0, 0, 0.2);
		padding: 0 30rpx;
		border-radius: 0 1px 1px 0;
		font-size: 22rpx;
		text-align: center;
		color: #000;
		line-height: 34rpx;
	}
	.footer-fixed .btn-open-blind {
		height: 90rpx;
		background: $uni-bg-color-main-linear;
		border-radius: 45rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
	}
	.footer-fixed--blind {
		background: unset;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.xzDiv{
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		width: 30rpx;
		z-index: 11;
	}
	
	.zz{
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 14;
		  background: rgba(0, 0, 0, 0.5);
		  display: flex;
		  justify-content: space-around;
		  align-items: center;
		  z-index: 11;
		  .popup{
			  border-radius: 20rpx;
			  width: 500rpx;
			  height: 250rpx;
			  background-color: #fff;
			  display: flex;
			  flex-direction: column;
			  justify-content: space-between;
			  .title{
				  margin-top: 50rpx;
				  text-align: center;
				  height: 80rpx;
				  line-height: 80rpx;
				  // border-bottom: 1rpx solid #999;
			  }
			  .btn{
				  display: flex;
			  }
		  }
		  
		  .boxList{
			  border-radius: 20rpx;
			  width: 700rpx;
			  height: 1400rpx;
			  background-color: #e5e5e5;
			  display: flex;
			  flex-direction: column;
			  justify-content: space-between;
			  position: relative;
			  // overflow: hidden;
			  overflow-y: scroll;
			.boxList-btn{
				position: absolute;
				bottom: 0;
				width: 100%;
				background-color: #fff;
				z-index: 11;
			}
		  }
	}
	.assets .assets__num {
		background: #FEE440;
		border-radius: 8rpx;
		padding: 4rpx 16rpx;
		position: absolute;
		top: 16rpx;
		left: 16rpx;
		z-index: 4;
	}
	.boxList-sol{
		overflow: scroll;
	}
	.assets__type{
		position: absolute;
		background-color: rgba(0,0,0,0.6);
		width: 100%;
		height:100% ;
		z-index: 5;
		
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
